<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="咨询用户id">
              <a-input placeholder="请输入咨询用户id" v-model="queryParam.userId"></a-input>
            </a-form-item>
          </a-col> -->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="咨询用户">
              <a-input
                placeholder="请输入咨询用户"
                v-model="queryParam.userConsultation"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="指派用户">
              <!-- <a-input
                placeholder="请输入指派用户"
                v-model="queryParam.consultantExpert"
              ></a-input> -->
              <a-select
              showSearch
              v-model="queryParam.consultantId"
              placeholder="请用手机号搜索"
              @search="searchChange($event)"
              @change="handelchange"
              option-filter-prop="children"
              :filter-option="filterOption"
            >
              <a-select-option
                :value="item.id"
                v-for="(item, index) in list"
                :key="index"
                >{{ item.username }}</a-select-option
              >
            </a-select>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="咨询用户手机号">
              <a-input placeholder="请输入咨询用户手机号" v-model="queryParam.userPhone"></a-input>
            </a-form-item>
          </a-col>

            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="指派用户手机号">
              <a-input placeholder="请输入用户手机号" v-model="queryParam.expertPhone"></a-input>
            </a-form-item>
          </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span
              style="float: left;overflow: hidden;"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
                >重置</a-button
              >
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? "收起" : "展开" }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <!-- <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('咨询管理')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div> -->

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        @change="handleTableChange"
      >
        <span slot="advisoryStatus" slot-scope="text">
          {{
            text == 0
              ? "预约中"
              : text == 1
              ? "预约成功"
              : text == 2
              ? "预约失败"
              : text == 3 ? '咨询中' : '咨询完成'
          }}
        </span>
        <span slot="questionnaireLink" slot-scope="text">
          <a :href="text">点击查看</a>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="Orderdatail(record.id)">查看相关订单</a>
          <a-divider type="vertical" />
          <a @click="configFun(record, '0')">指派</a>
      
          <a-divider type="vertical" />
          <a @click="handleEdit(record, '2')">编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <!-- <a-menu-item>
                <a-popconfirm
                  title="确定删除吗?"
                  @confirm="() => handleDelete(record.id)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item> -->
              <a-menu-item>
                <a-popconfirm
                  title="确定通过吗?"
                  @confirm="() => handletg(record.id)"
                >
                  <a>通过</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确定撤回吗?"
                  @confirm="() => handlecancel(record.id)"
                >
                  <a>退回</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a @click="handleEdit(record, '1')">查看</a>
              </a-menu-item>
              <a-menu-item>
                  <a @click="endStatus(record)">{{record.advisoryStatus == 3 || record.advisoryStatus == 3 ? '生成订单' :  record.advisoryStatus == 1 ? '生成订单' : ''}}</a>
              </a-menu-item>
            
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <consult-modal ref="modalForm" @ok="modalFormOk"></consult-modal>
  </a-card>
</template>

<script>
import "@/assets/less/TableExpand.less";
import ConsultModal from "./modules/ConsultModal";
import { busConsultpass, busConsultbounced, busConsultend,busConsultinQuire ,sysUserList,busConsultassign} from "@/api/tsapi";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { addOrderAPI } from "@/api/api";
export default {
  name: "ConsultList",
  mixins: [JeecgListMixin],
  components: {
    ConsultModal,
  },
  data() {
    return {
      description: "咨询管理管理页面",
      paymentOrderInfo:'',
      // 表头
      columns: [
        {
          title: "咨询用户",
          align: "center",
          dataIndex: "userConsultation",
        },
        {
          title: "咨询用户手机号",
          align: "center",
          dataIndex: "userPhone",
        },
        {
          title: "指派用户",
          align: "center",
          dataIndex: "consultantExpert",
        },
        {
          title: "openid",
          align: "center",
          dataIndex: "openid",
        },
        {
          title: "指派用户手机号",
          align: "center",
          dataIndex: "expertPhone",
        },
        // {
        //   title: "应支付他币",
        //   align: "center",
        //   dataIndex: "needHeSaidPrice",
        // },
        // {
        //   title: "客户支付他币",
        //   align: "center",
        //   dataIndex: "heSaidPrice",
        // },
        {
          title: "咨询状态",
          align: "center",
          dataIndex: "advisoryStatus",
          scopedSlots: { customRender: "advisoryStatus" },
        },
        {
          title: "咨询时间",
          align: "center",
          dataIndex: "consultTime",
        },
        {
          title: "调查问卷",
          align: "center",
          dataIndex: "questionnaireLink",
          scopedSlots: { customRender: "questionnaireLink" },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        list: "/consult/consult/list",
        delete: "/consult/consult/delete",
        deleteBatch: "/consult/consult/deleteBatch",
        exportXlsUrl: "consult/consult/exportXls",
        importExcelUrl: "consult/consult/importExcel",
      },
      list:[]
    };
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
    },
  },
  mounted(){
    this.Userdata()
  },
  methods: {
    configFun(record, type){
      if(record.advisoryStatus == '0' || record.advisoryStatus == '1' ){
        this.handleEdit(record,type);
      }else{
        this.$message.warning('此订单不可指派');
      }
    },
    Userdata(e){
      let params = {
        phone:e
      }
      busConsultassign(params).then((res) => {
         res.result.records.map((res)=>{
          res.username = res.username + `(${res.phone})`
        })
      this.list = res.result.records;
    });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    searchChange(e) {
      this.Userdata(e)
    },
    handelchange(e, data) {
      // console.log(e, data, "eeeeeeeeeeeeeeeee");
      // const ids = this.list.find((item)=> item.id == e)
      // this.useropenid = ids.openid
      // this.model.expertPhone = ids.phone
      // console.log(ids,'ids');
    },
    //通过
    handletg(id) {
      busConsultpass({ id: id }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.loadData();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //撤回
    handlecancel(id) {
      busConsultbounced({ id: id }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.loadData();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //结束咨询订单
    endStatus(record) {
      // 创建一个 Date 对象
      // var today = new Date();
      // // 获取年、月、日、时、分、秒
      // var year = today.getFullYear();
      // var month = today.getMonth() + 1; // 月份是从 0 开始计数的，需要加1
      // var day = today.getDate();
      // var hours = today.getHours();
      // var minutes = today.getMinutes();
      // var seconds = today.getSeconds();

      // // 格式化输出
      // var formattedTime =
      //   year +
      //   "-" +
      //   (month < 10 ? "0" : "") +
      //   month +
      //   "-" +
      //   (day < 10 ? "0" : "") +
      //   day +
      //   " " +
      //   (hours < 10 ? "0" : "") +
      //   hours +
      //   ":" +
      //   (minutes < 10 ? "0" : "") +
      //   minutes +
      //   ":" +
      //   (seconds < 10 ? "0" : "") +
      //   seconds;

      // console.log(formattedTime);
      // "2023-11-08 19:05:05"
      let prarms = {
        id: record.id,
      };
     //结束咨询订单接口
      busConsultend(prarms).then((res) => {
        console.log(res,'res');
        if (res.code == 200) {
          this.loadData();
          let obj = res.result.paymentOrderInfo
          localStorage.setItem("busConsult",JSON.stringify(res.result.busConsult))
          this.paymentOrderInfo = res.result.paymentOrderInfo
          this.handleEdit(obj,'4')
        } else {
          this.$message.error(res.message);
        
        }
      });
    },
    //查看相关 订单
    Orderdatail(id){
      busConsultinQuire({id:id}).then((res)=>{
        if(res.code == 200)
        {
          let obj = res.result
          this.handleEdit(obj,'5')
        }else{
          this.$message.error(res.message);
        }
      })
    }
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>
